<!DOCTYPE html>
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>Tables | Huraga Bootstrap Admin Template</title>
		<meta name="description" content="">
		<meta name="author" content="Walking Pixels | www.walkingpixels.com">
		<meta name="robots" content="index, follow">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- CSS styles -->
		<link rel='stylesheet' type='text/css' href='css/huraga-green.css'>
		
		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="img/icons/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="img/icons/apple-touch-icon-57-precomposed.png">
		
		<!-- JS Libs -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/libs/jquery.js"><\/script>')</script>
		<script src="js/libs/modernizr.js"></script>
		<script src="js/libs/selectivizr.js"></script>
		
		<script>
			$(document).ready(function(){
				
				// Tooltips
				$('[title]').tooltip({
					placement: 'top'
				});
				
				// Dropdowns
				$('.dropdown-toggle').dropdown();
				
				// Tabs
				$('.demoTabs a').click(function (e) {
					e.preventDefault();
					$(this).tab('show');
				})
				
			});
		</script>
	</head>
	<body>
		
		<!-- Main page header -->
		<header class="container">
		
			<!-- Main page logo -->
			<h1><a href="login.html" class="brand">Huraga</a></h1>
			
			<!-- Main page headline -->
			<p>A beautifully minimalistic admin template</p>
			
			<!-- Alternative navigation -->
			<nav>
				<ul>
					<li>
						<form class="nav-search">
							<input type="text" placeholder="Search&hellip;">
						</form>
					</li>
					<li>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Configuration
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="401.html"><span class="awe-flag"></span> Error page 401</a></li>
								<li><a href="403.html"><span class="awe-flag"></span> Error page 403</a></li>
								<li><a href="404.html"><span class="awe-flag"></span> Error page 404</a></li>
								<li><a href="500.html"><span class="awe-flag"></span> Error page 500</a></li>
								<li><a href="503.html"><span class="awe-flag"></span> Error page 503</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">Logout</a></li>
				</ul>
			</nav>
			<!-- /Alternative navigation -->
			
		</header>
		<!-- /Main page header -->
		
		<!-- Main page container -->
		<section class="container" role="main">
		
			<!-- Left (navigation) side -->
			<div class="navigation-block">
			
				<!-- Sample side note -->
				<section class="side-note">
					<div class="side-note-container">
						<h2>Sample Side Note</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat dui, quis purus.</p>
					</div>
					<div class="side-note-bottom"></div>
				</section>
				<!-- /Sample side note -->
				
				<!-- Main navigation -->
				<nav class="main-navigation" role="navigation">
					<ul>
						<li><a href="index.html" class="no-submenu"><span class="awe-home"></span>Dashboard</a></li>
						<li><a href="forms.html" class="no-submenu"><span class="awe-tasks"></span>Forms</a></li>
						<li><a href="charts.html" class="no-submenu"><span class="awe-signal"></span>Charts</a></li>
						<li class="current"><a href="tables.html" class="no-submenu"><span class="awe-table"></span>Tables</a></li>
						<li>
							<a href="#"><span class="awe-picture"></span>Gallery</a>
							<ul>
								<li><a href="gallery.html">Car Gallery</a></li>
								<li><a href="gallery.html">Food Gallery</a></li>
								<li><a href="gallery.html">Art Gallery</a></li>
								<li><a href="gallery.html">Animal Gallery</a></li>
								<li><a href="gallery.html">Super long name to see how it collapse</a></li>
							</ul>
						</li>
						<li><a href="file-explorer.html" class="no-submenu"><span class="awe-file"></span>File explorer <span class="badge">7</span></a></li>
						<li><a href="calendar.html" class="no-submenu"><span class="awe-calendar"></span>Calendar</a></li>
						<li><a href="ui-buttons.html" class="no-submenu"><span class="awe-magic"></span>UI & Buttons</a></li>
						<li><a href="typo.html" class="no-submenu"><span class="awe-font"></span>Typography</a></li>
						<li><a href="grid.html" class="no-submenu"><span class="awe-th"></span>Grid</a></li>
						<li>
							<a href="#"><span class="awe-heart"></span>Goodies</a>
							<ul>
								<li><a href="goodies.html">Goodies</a></li>
								<li><a href="401.html">Error 401</a></li>
								<li><a href="403.html">Error 403</a></li>
								<li><a href="404.html">Error 404</a></li>
								<li><a href="500.html">Error 500</a></li>
								<li><a href="503.html">Error 503</a></li>
							</ul>
						</li>
					</ul>
				</nav>
				<!-- /Main navigation -->
				
			</div>
			<!-- Left (navigation) side -->
			
			<!-- Right (content) side -->
			<div class="content-block" role="main">
			
				<!-- Page header -->
				<article class="page-header">
					<h1>Tables & tabular data</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit, dolor mollis adipiscing elementum, ipsum turpis euismod tellus, vitae mollis velit leo id nisi. Morbi non lectus turpis, eu interdum orci. In at rutrum nisi. Donec sit amet urna purus, at eleifend ipsum. Sed magna enim, tempor eu tincidunt vitae, dictum tristique arcu.</p>
				</article>
				<!-- /Page header -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Data block -->
					<article class="span12 data-block">
						<div class="data-container">
							<header>
								<h2>Tables</h2>
								<ul class="data-header-actions">
									<li class="demoTabs active"><a href="#static" class="btn btn-alt btn-inverse">Static</a></li>
									<li class="demoTabs"><a href="#dynamic" class="btn btn-alt btn-inverse">Dynamic</a></li>
								</ul>
							</header>
							<section class="tab-content">
							
								<!-- Tab #static -->
								<div class="tab-pane active" id="static">
								
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat, diam sit amet iaculis auctor, risus arcu vehicula arcu, in posuere magna massa non quam. Integer aliquam justo sit amet neque adipiscing consectetur. Duis volutpat neque ut est gravida lacinia. Ut laoreet tempus lacus nec pellentesque. Integer ante tortor, ornare et semper at, suscipit in sapien. Suspendisse turpis magna, suscipit non interdum et, semper eu neque.</p>
									<h3>Styled table</h3>
									<p>For a very basic table style use class <code>table</code>.</p>
									<table class="table table-hover">
										<thead>
											<tr>
												<th>Year</th>
												<th>Apples</th>
												<th>Bananas</th>
												<th>Mosquitoes killed</th>
												<th></th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>1983</td>
												<td>4 562 tons</td>
												<td>3 564 tons</td>
												<td>9 tons</td>
												<td class="toolbar">
													<div class="btn-group">
														<button class="btn"><span class="awe-pushpin"></span></button>
														<button class="btn"><span class="awe-wrench"></span></button>
														<button class="btn"><span class="awe-remove"></span></button>
													</div>
												</td>
											</tr>
											<tr>
												<td>1993</td>
												<td>8 931 tons</td>
												<td>5 132 tons</td>
												<td>7 tons</td>
												<td class="toolbar">
													<div class="btn-group">
														<button class="btn btn-flat"><span class="awe-pushpin"></span></button>
														<button class="btn btn-flat"><span class="awe-wrench"></span></button>
														<button class="btn btn-flat"><span class="awe-remove"></span></button>
													</div>
												</td>
											</tr>
											<tr>
												<td>2003</td>
												<td>46 tons</td>
												<td>163 tons</td>
												<td>135 tons</td>
												<td class="toolbar">
													<a href="#"><span class="fam-page-white-wrench"></span></a>
													<a href="#"><span class="fam-page-white-edit"></span></a>
													<a href="#"><span class="fam-page-white-medal"></span></a>
													<a href="#"><span class="fam-page-white-zip"></span></a>
													<a href="#"><span class="fam-page-white-wrench"></span></a>
												</td>
											</tr>
										</tbody>
									</table>
									
									<h3>Striped table</h3>
									<p>If you got too much data and want to increase readability use classes <code>table table-striped</code> to add zebra stripe style.</p>
									<table class="table table-striped table-hover">
										<thead>
											<tr>
												<th>ID</th>
												<th>Assigned to</th>
												<th>Due</th>
												<th>Status</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>#16 513</td>
												<td><a href="#">Tommy Tornstone</a></td>
												<td><time>12.04. 2015</time></td>
												<td><span class="label">open</span></td>
											</tr>
											<tr>
												<td>#16 512</td>
												<td><a href="#">Remi Redstone</a></td>
												<td><time>09.04. 2015</time></td>
												<td><span class="label">closed</span></td>
											</tr>
											<tr>
												<td>#16 511</td>
												<td><a href="#">Gabi Gabstone</a></td>
												<td><time>10.04. 2015</time></td>
												<td><span class="label">closed</span></td>
											</tr>
										</tbody>
									</table>
									
									<h3>Fully bordered table</h3>
									<p>Do you prefer a fully table-bordered tables? No problem, use classes <code>table table-bordered</code>.</p>
									<table class="table table-bordered table-hover">
										<thead>
											<tr>
												<th>Nuclear test</th>
												<th>1<sup>st</sup> Yield (kT)</th>
												<th>2<sup>nd</sup> Yield (kT)</th>
												<th>Date</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td rowspan="2">Trinity</td>
												<td>18-20</td>
												<td>19-21</td>
												<td>1945-07-16</td>
											</tr>
											<tr>
												<td>18-21</td>
												<td>16-18</td>
												<td>1945-07-19</td>
											</tr>
											<tr>
												<td>Little Boy</td>
												<td>12-18</td>
												<td>14-16</td>
												<td>1945-08-06</td>
											</tr>
											<tr>
												<td>Fat Man</td>
												<td colspan="2">18-23</td>
												<td>1945-08-09</td>
											</tr>
										</tbody>
									</table>
									
									<h3>Condensed table</h3>
									<p>Need some extra space? To cut vertical paddings in half use classes <code>table table-condensed</code>.</p>
									<table class="table table-condensed table-hover">
										<thead>
											<tr>
												<th>#</th>
												<th>A</th>
												<th>B</th>
												<th>C</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>Test No. 213</td>
												<td>79 mg</td>
												<td>75 mg</td>
												<td>92 mg</td>
											</tr>
											<tr>
												<td>Test No. 212</td>
												<td>98 mg</td>
												<td>123 mg</td>
												<td>47 mg</td>
											</tr>
											<tr>
												<td>Test No. 211</td>
												<td>-</td>
												<td>-</td>
												<td>879 mg</td>
											</tr>
										</tbody>
									</table>
									
									<h3>Fully styled table</h3>
									<p>Of course you can combine them all <code>table table-striped table-bordered table-condensed</code>!</p>
									<table class="table table-striped table-bordered table-condensed table-hover">
										<thead>
											<tr>
												<th></th>
												<th colspan="3">Results</th>
											</tr>
											<tr>
												<th>#</th>
												<th>A</th>
												<th>B</th>
												<th>C</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>1</td>
												<td>73 &plusmn;2</td>
												<td>1 239 &plusmn;31</td>
												<td>8 621 &plusmn;7</td>
											</tr>
											<tr>
												<td>2</td>
												<td>1 375 &plusmn;102</td>
												<td>4 613 &plusmn;0</td>
												<td>78 612 &plusmn;26</td>
											</tr>
											<tr>
												<td>3</td>
												<td colspan="2">7 896 321 &plusmn;12 556</td>
												<td>467 896 &plusmn;973</td>
											</tr>
										</tbody>
									</table>
									
									<h3>Table with row classes</h3>
									<p>If you need better control of column width, use the row classes <code>spanX</code>, where X is the number of columns (span2, span4 etc.).</p>
									<table class="table table-bordered table-hover">
										<thead>
											<tr>
												<th class="span2">#</th>
												<th class="span3">Win</th>
												<th class="span1">Lose</th>
												<th class="span6">Draw</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>Zeus</td>
												<td>4 562</td>
												<td>64</td>
												<td>923</td>
											</tr>
											<tr>
												<td>Hera</td>
												<td>931</td>
												<td>132</td>
												<td>7</td>
											</tr>
											<tr>
												<td>Poseidon</td>
												<td>46</td>
												<td>163</td>
												<td>1 357</td>
											</tr>
										</tbody>
									</table>
								</div>
								<!-- /Tab #static -->
								
								<!-- Tab #dynamic -->
								<div class="tab-pane" id="dynamic">
									<h3>Basic jQuery DataTable</h3>
									<table class="datatable table table-striped table-bordered table-hover" id="example">
										<thead>
											<tr>
												<th>Rendering engine</th>
												<th>Browser</th>
												<th>Platform(s)</th>
												<th>Engine version</th>
												<th>CSS grade</th>
											</tr>
										</thead>
										<tbody>
											<tr class="odd gradeX">
												<td>Trident</td>
												<td>Internet
													 Explorer 4.0</td>
												<td>Win 95+</td>
												<td>4</td>
												<td>X</td>
											</tr>
											<tr class="even gradeC">
												<td>Trident</td>
												<td>Internet
													 Explorer 5.0</td>
												<td>Win 95+</td>
												<td>5</td>
												<td>C</td>
											</tr>
											<tr class="odd gradeA">
												<td>Trident</td>
												<td>Internet
													 Explorer 5.5</td>
												<td>Win 95+</td>
												<td>5.5</td>
												<td>A</td>
											</tr>
											<tr class="even gradeA">
												<td>Trident</td>
												<td>Internet
													 Explorer 6</td>
												<td>Win 98+</td>
												<td>6</td>
												<td>A</td>
											</tr>
											<tr class="odd gradeA">
												<td>Trident</td>
												<td>Internet Explorer 7</td>
												<td>Win XP SP2+</td>
												<td>7</td>
												<td>A</td>
											</tr>
											<tr class="even gradeA">
												<td>Trident</td>
												<td>AOL browser (AOL desktop)</td>
												<td>Win XP</td>
												<td>6</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 1.0</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 1.5</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 2.0</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 3.0</td>
												<td>Win 2k+ / OSX.3+</td>
												<td>1.9</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Camino 1.0</td>
												<td>OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Camino 1.5</td>
												<td>OSX.3+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Netscape 7.2</td>
												<td>Win 95+ / Mac OS 8.6-9.2</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Netscape Browser 8</td>
												<td>Win 98SE+</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Netscape Navigator 9</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.0</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.1</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.2</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.2</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.3</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.3</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.4</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.4</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.5</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.5</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.6</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.6</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.7</td>
												<td>Win 98+ / OSX.1+</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.8</td>
												<td>Win 98+ / OSX.1+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Seamonkey 1.1</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Epiphany 2.20</td>
												<td>Gnome</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 1.2</td>
												<td>OSX.3</td>
												<td>125.5</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 1.3</td>
												<td>OSX.3</td>
												<td>312.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 2.0</td>
												<td>OSX.4+</td>
												<td>419.3</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 3.0</td>
												<td>OSX.4+</td>
												<td>522.1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>OmniWeb 5.5</td>
												<td>OSX.4+</td>
												<td>420</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>iPod Touch / iPhone</td>
												<td>iPod</td>
												<td>420.1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>S60</td>
												<td>S60</td>
												<td>413</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 7.0</td>
												<td>Win 95+ / OSX.1+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 7.5</td>
												<td>Win 95+ / OSX.2+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 8.0</td>
												<td>Win 95+ / OSX.2+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 8.5</td>
												<td>Win 95+ / OSX.2+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 9.0</td>
												<td>Win 95+ / OSX.3+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 9.2</td>
												<td>Win 88+ / OSX.3+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 9.5</td>
												<td>Win 88+ / OSX.3+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera for Wii</td>
												<td>Wii</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Nokia N800</td>
												<td>N800</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Nintendo DS browser</td>
												<td>Nintendo DS</td>
												<td>8.5</td>
												<td>C/A<sup>1</sup></td>
											</tr>
											<tr class="gradeC">
												<td>KHTML</td>
												<td>Konqureror 3.1</td>
												<td>KDE 3.1</td>
												<td>3.1</td>
												<td>C</td>
											</tr>
											<tr class="gradeA">
												<td>KHTML</td>
												<td>Konqureror 3.3</td>
												<td>KDE 3.3</td>
												<td>3.3</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>KHTML</td>
												<td>Konqureror 3.5</td>
												<td>KDE 3.5</td>
												<td>3.5</td>
												<td>A</td>
											</tr>
											<tr class="gradeX">
												<td>Tasman</td>
												<td>Internet Explorer 4.5</td>
												<td>Mac OS 8-9</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeC">
												<td>Tasman</td>
												<td>Internet Explorer 5.1</td>
												<td>Mac OS 7.6-9</td>
												<td>1</td>
												<td>C</td>
											</tr>
											<tr class="gradeC">
												<td>Tasman</td>
												<td>Internet Explorer 5.2</td>
												<td>Mac OS 8-X</td>
												<td>1</td>
												<td>C</td>
											</tr>
											<tr class="gradeA">
												<td>Misc</td>
												<td>NetFront 3.1</td>
												<td>Embedded devices</td>
												<td>-</td>
												<td>C</td>
											</tr>
											<tr class="gradeA">
												<td>Misc</td>
												<td>NetFront 3.4</td>
												<td>Embedded devices</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeX">
												<td>Misc</td>
												<td>Dillo 0.8</td>
												<td>Embedded devices</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeX">
												<td>Misc</td>
												<td>Links</td>
												<td>Text only</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeX">
												<td>Misc</td>
												<td>Lynx</td>
												<td>Text only</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeC">
												<td>Misc</td>
												<td>IE Mobile</td>
												<td>Windows Mobile 6</td>
												<td>-</td>
												<td>C</td>
											</tr>
											<tr class="gradeC">
												<td>Misc</td>
												<td>PSP browser</td>
												<td>PSP</td>
												<td>-</td>
												<td>C</td>
											</tr>
											<tr class="gradeU">
												<td>Other browsers</td>
												<td>All others</td>
												<td>-</td>
												<td>-</td>
												<td>U</td>
											</tr>
										</tbody>
									</table>
								
									<div class="row-fluid">
										<div class="span6">
											<h3>Basic jQuery DataTable with filter</h3>
										</div>
										<div class="span6">
										
											<!-- DataTable column filter -->
											<div class="btn-group pull-right">
												<a href="#" data-toggle="dropdown" class="btn btn-alt btn-inverse dropdown-toggle">Column filter <span class="caret"></span></a>
												<ul class="dropdown-menu datatable-controls">
													<li><label class="checkbox" for="dt_col_1"><input type="checkbox" value="0" id="dt_col_1" name="toggle-cols" checked="checked"> Rendering engine</label></li>
													<li><label class="checkbox" for="dt_col_2"><input type="checkbox" value="1" id="dt_col_2" name="toggle-cols" checked="checked"> Browser</label></li>
													<li><label class="checkbox" for="dt_col_3"><input type="checkbox" value="2" id="dt_col_3" name="toggle-cols" checked="checked"> Platform(s)</label></li>
													<li><label class="checkbox" for="dt_col_4"><input type="checkbox" value="3" id="dt_col_4" name="toggle-cols" checked="checked"> Engine version</label></li>
													<li><label class="checkbox" for="dt_col_5"><input type="checkbox" value="4" id="dt_col_5" name="toggle-cols" checked="checked"> CSS grade</label></li>
												</ul>
											</div>
											<!-- /DataTable column filter -->
											
										</div>
									</div>
									
									<table class="datatable table table-striped table-bordered table-hover" id="example-2">
										<thead>
											<tr>
												<th>Rendering engine</th>
												<th>Browser</th>
												<th>Platform(s)</th>
												<th>Engine version</th>
												<th>CSS grade</th>
											</tr>
										</thead>
										<tbody>
											<tr class="odd gradeX">
												<td>Trident</td>
												<td>Internet
													 Explorer 4.0</td>
												<td>Win 95+</td>
												<td>4</td>
												<td>X</td>
											</tr>
											<tr class="even gradeC">
												<td>Trident</td>
												<td>Internet
													 Explorer 5.0</td>
												<td>Win 95+</td>
												<td>5</td>
												<td>C</td>
											</tr>
											<tr class="odd gradeA">
												<td>Trident</td>
												<td>Internet
													 Explorer 5.5</td>
												<td>Win 95+</td>
												<td>5.5</td>
												<td>A</td>
											</tr>
											<tr class="even gradeA">
												<td>Trident</td>
												<td>Internet
													 Explorer 6</td>
												<td>Win 98+</td>
												<td>6</td>
												<td>A</td>
											</tr>
											<tr class="odd gradeA">
												<td>Trident</td>
												<td>Internet Explorer 7</td>
												<td>Win XP SP2+</td>
												<td>7</td>
												<td>A</td>
											</tr>
											<tr class="even gradeA">
												<td>Trident</td>
												<td>AOL browser (AOL desktop)</td>
												<td>Win XP</td>
												<td>6</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 1.0</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 1.5</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 2.0</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Firefox 3.0</td>
												<td>Win 2k+ / OSX.3+</td>
												<td>1.9</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Camino 1.0</td>
												<td>OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Camino 1.5</td>
												<td>OSX.3+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Netscape 7.2</td>
												<td>Win 95+ / Mac OS 8.6-9.2</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Netscape Browser 8</td>
												<td>Win 98SE+</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Netscape Navigator 9</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.0</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.1</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.2</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.2</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.3</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.3</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.4</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.4</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.5</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.5</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.6</td>
												<td>Win 95+ / OSX.1+</td>
												<td>1.6</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.7</td>
												<td>Win 98+ / OSX.1+</td>
												<td>1.7</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Mozilla 1.8</td>
												<td>Win 98+ / OSX.1+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Seamonkey 1.1</td>
												<td>Win 98+ / OSX.2+</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Gecko</td>
												<td>Epiphany 2.20</td>
												<td>Gnome</td>
												<td>1.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 1.2</td>
												<td>OSX.3</td>
												<td>125.5</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 1.3</td>
												<td>OSX.3</td>
												<td>312.8</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 2.0</td>
												<td>OSX.4+</td>
												<td>419.3</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>Safari 3.0</td>
												<td>OSX.4+</td>
												<td>522.1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>OmniWeb 5.5</td>
												<td>OSX.4+</td>
												<td>420</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>iPod Touch / iPhone</td>
												<td>iPod</td>
												<td>420.1</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Webkit</td>
												<td>S60</td>
												<td>S60</td>
												<td>413</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 7.0</td>
												<td>Win 95+ / OSX.1+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 7.5</td>
												<td>Win 95+ / OSX.2+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 8.0</td>
												<td>Win 95+ / OSX.2+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 8.5</td>
												<td>Win 95+ / OSX.2+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 9.0</td>
												<td>Win 95+ / OSX.3+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 9.2</td>
												<td>Win 88+ / OSX.3+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera 9.5</td>
												<td>Win 88+ / OSX.3+</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Opera for Wii</td>
												<td>Wii</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Nokia N800</td>
												<td>N800</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>Presto</td>
												<td>Nintendo DS browser</td>
												<td>Nintendo DS</td>
												<td>8.5</td>
												<td>C/A<sup>1</sup></td>
											</tr>
											<tr class="gradeC">
												<td>KHTML</td>
												<td>Konqureror 3.1</td>
												<td>KDE 3.1</td>
												<td>3.1</td>
												<td>C</td>
											</tr>
											<tr class="gradeA">
												<td>KHTML</td>
												<td>Konqureror 3.3</td>
												<td>KDE 3.3</td>
												<td>3.3</td>
												<td>A</td>
											</tr>
											<tr class="gradeA">
												<td>KHTML</td>
												<td>Konqureror 3.5</td>
												<td>KDE 3.5</td>
												<td>3.5</td>
												<td>A</td>
											</tr>
											<tr class="gradeX">
												<td>Tasman</td>
												<td>Internet Explorer 4.5</td>
												<td>Mac OS 8-9</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeC">
												<td>Tasman</td>
												<td>Internet Explorer 5.1</td>
												<td>Mac OS 7.6-9</td>
												<td>1</td>
												<td>C</td>
											</tr>
											<tr class="gradeC">
												<td>Tasman</td>
												<td>Internet Explorer 5.2</td>
												<td>Mac OS 8-X</td>
												<td>1</td>
												<td>C</td>
											</tr>
											<tr class="gradeA">
												<td>Misc</td>
												<td>NetFront 3.1</td>
												<td>Embedded devices</td>
												<td>-</td>
												<td>C</td>
											</tr>
											<tr class="gradeA">
												<td>Misc</td>
												<td>NetFront 3.4</td>
												<td>Embedded devices</td>
												<td>-</td>
												<td>A</td>
											</tr>
											<tr class="gradeX">
												<td>Misc</td>
												<td>Dillo 0.8</td>
												<td>Embedded devices</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeX">
												<td>Misc</td>
												<td>Links</td>
												<td>Text only</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeX">
												<td>Misc</td>
												<td>Lynx</td>
												<td>Text only</td>
												<td>-</td>
												<td>X</td>
											</tr>
											<tr class="gradeC">
												<td>Misc</td>
												<td>IE Mobile</td>
												<td>Windows Mobile 6</td>
												<td>-</td>
												<td>C</td>
											</tr>
											<tr class="gradeC">
												<td>Misc</td>
												<td>PSP browser</td>
												<td>PSP</td>
												<td>-</td>
												<td>C</td>
											</tr>
											<tr class="gradeU">
												<td>Other browsers</td>
												<td>All others</td>
												<td>-</td>
												<td>-</td>
												<td>U</td>
											</tr>
										</tbody>
									</table>
								</div>
								<!-- /Tab #dynamic -->
								
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Data block -->
					<article class="span12 data-block">
						<div class="data-container">
							<header>
								<h2>Combined table header cells</h2>
							</header>
							<section>
								<table class="table table-hover">
									<thead>
										<tr>
											<th>Year</th>
											<th>Apples</th>
											<th>Bananas</th>
											<th>Mosquitoes killed</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th>1983</th>
											<td>4 562 tons</td>
											<td>3 564 tons</td>
											<td>9 tons</td>
										</tr>
										<tr>
											<th>1993</th>
											<td>8 931 tons</td>
											<td>5 132 tons</td>
											<td>7 tons</td>
										</tr>
										<tr>
											<th>2003</th>
											<td>46 tons</td>
											<td>163 tons</td>
											<td>135 tons</td>
										</tr>
									</tbody>
								</table>
							</section>
							<footer class="warning">
								<p>A lot of templates do not support vertical table header cells. We do. You can combine &lt;th&gt; as you need (in terms of W3C specification).</p>
							</footer>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- Grid row -->
				
			</div>
			<!-- /Right (content) side -->
			
		</section>
		<!-- /Main page container -->
		
		<!-- Main page footer -->
		<footer class="container">
			<p>Built with love on <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> by <a href="http://www.walkingpixels.com">Walking Pixels</a>.</p>
			<ul>
				<li><a href="#" class="">Support</a></li>
				<li><a href="#" class="">Documentation</a></li>
				<li><a href="#" class="">API</a></li>
			</ul>
			<a href="#top" class="btn btn-primary btn-flat pull-right">Top &uarr;</a>
		</footer>
		<!-- /Main page footer -->
		
		<!-- Scripts -->
		<script src="js/navigation.js"></script>
		<script src="js/bootstrap/bootstrap-affix.js"></script>
		<script src="js/bootstrap/bootstrap-tooltip.js"></script>
		<script src="js/bootstrap/bootstrap-dropdown.js"></script>
		<script src="js/bootstrap/bootstrap-tab.js"></script>
		
		<!-- jQuery DataTable -->
		<script src="js/plugins/dataTables/jquery.datatables.min.js"></script>
		<script>
			/* Default class modification */
			$.extend( $.fn.dataTableExt.oStdClasses, {
				"sWrapper": "dataTables_wrapper form-inline"
			} );
			
			/* API method to get paging information */
			$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
			{
				return {
					"iStart":         oSettings._iDisplayStart,
					"iEnd":           oSettings.fnDisplayEnd(),
					"iLength":        oSettings._iDisplayLength,
					"iTotal":         oSettings.fnRecordsTotal(),
					"iFilteredTotal": oSettings.fnRecordsDisplay(),
					"iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
					"iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
				};
			}
			
			/* Bootstrap style pagination control */
			$.extend( $.fn.dataTableExt.oPagination, {
				"bootstrap": {
					"fnInit": function( oSettings, nPaging, fnDraw ) {
						var oLang = oSettings.oLanguage.oPaginate;
						var fnClickHandler = function ( e ) {
							e.preventDefault();
							if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
								fnDraw( oSettings );
							}
						};
						
						$(nPaging).addClass('pagination').append(
							'<ul>'+
								'<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
								'<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
							'</ul>'
						);
						var els = $('a', nPaging);
						$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
						$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
					},
					
					"fnUpdate": function ( oSettings, fnDraw ) {
						var iListLength = 5;
						var oPaging = oSettings.oInstance.fnPagingInfo();
						var an = oSettings.aanFeatures.p;
						var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
						
						if ( oPaging.iTotalPages < iListLength) {
							iStart = 1;
							iEnd = oPaging.iTotalPages;
						}
						else if ( oPaging.iPage <= iHalf ) {
							iStart = 1;
							iEnd = iListLength;
						} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
							iStart = oPaging.iTotalPages - iListLength + 1;
							iEnd = oPaging.iTotalPages;
						} else {
							iStart = oPaging.iPage - iHalf + 1;
							iEnd = iStart + iListLength - 1;
						}
						
						for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
							// Remove the middle elements
							$('li:gt(0)', an[i]).filter(':not(:last)').remove();
							
							// Add the new list items and their event handlers
							for ( j=iStart ; j<=iEnd ; j++ ) {
								sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
								$('<li '+sClass+'><a href="#">'+j+'</a></li>')
									.insertBefore( $('li:last', an[i])[0] )
									.bind('click', function (e) {
										e.preventDefault();
										oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
										fnDraw( oSettings );
									} );
							}
							
							// Add / remove disabled classes from the static elements
							if ( oPaging.iPage === 0 ) {
								$('li:first', an[i]).addClass('disabled');
							} else {
								$('li:first', an[i]).removeClass('disabled');
							}
							
							if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
								$('li:last', an[i]).addClass('disabled');
							} else {
								$('li:last', an[i]).removeClass('disabled');
							}
						}
					}
				}
			});
			
			/* Show/hide table column */
			function dtShowHideCol( iCol ) {
				var oTable = $('#example-2').dataTable();
				var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
				oTable.fnSetColumnVis( iCol, bVis ? false : true );
			};
			
			/* Table #example */
			$(document).ready(function() {
				$('.datatable').dataTable( {
					"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
					"sPaginationType": "bootstrap",
					"oLanguage": {
						"sLengthMenu": "_MENU_ records per page"
					}
				});
				$('.datatable-controls').on('click','li input',function(){
					dtShowHideCol( $(this).val() );
				})
			});
		</script>
		
	</body>
</html>
